<template>
  <div class="project">
    <myNav></myNav>
    <div class="top">
      <header>
        <site-title :fontSize="2"></site-title>
      </header>
      <div class="content">
        <project-preview ></project-preview>
      </div>
    </div>
    <div class="bottom">
      <myFooter></myFooter>
    </div>
    
  </div>
</template>
<script>
import siteTitle from "@components/siteTitle";
import myFooter from "@components/footer";
import projectPreview from './preview';
import myNav from "@components/nav";
export default {
  name: 'project',
  components: {
    siteTitle,
    myFooter,
    myNav,
    projectPreview
  },
  mounted(){
    
  },
  data(){
    return {
      projectData: [
        {

        },
      ]
    }
  },

}
</script>
<style lang="less" scoped>
.project {
  .top {
    padding-top: 5vh;
    height: calc(100vh - 6rem);
    header {
      margin-left: 5vw;
    }
    .content {
      height: calc(100% - 10vh);
      margin-left: auto;
      margin-right: auto;
      width: 90%;
    }
  }
  
}
</style>
